import './index.less'
/**
 * 范围选择器
 */
export default {
  functional: true,
  name: 'RangePicker',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    },
    startPlaceholder: {
      type: String,
      default: '开始数额'
    },
    endPlaceholder: {
      type: String,
      default: '结束数额'
    },
    inputType: {
      type: String,
      default: ''
    },
    startValue: {
      type: [String, Number],
      default: ''
    },
    endValue: {
      type: [String, Number],
      default: ''
    }
  },
  render(h, ctx) {
    const { props, listeners } = ctx
    const { value, type, startPlaceholder, endPlaceholder, inputType, startValue, endValue } = props
    const { input, startInput, endInput } = listeners

    return (
      <div class="range-picker">
        {
          type === 'date'
          ?
          <el-date-picker
            type="daterange"
            value={value}
            onInput={v => input(v)}
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
          :
          (
            <div class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange flex">
              <i class="el-input__icon el-range__icon el-icon-edit-outline" />
              <el-input
                class="el-range-input"
                value={startValue}
                onInput={v => startInput(v)}
                placeholder={startPlaceholder}
                type={inputType}
              />
              <span class="el-range-separator">至</span>
              <el-input
                class="el-range-input"
                value={endValue}
                onInput={v => endInput(v)}
                placeholder={endPlaceholder}
                type={inputType}
              />
            </div>
          )
        }
      </div>
    )
  }
}